<template>
  <view class="recharge">
    <view class="search">
      <view class="searchInput">
        <view style="display: flex;align-items: center;">
          <uni-icons type="search"
            size="20"></uni-icons>
          <input class="uni-input"
            v-model="userName"
            placeholder="输入商品名称搜索"
            @input="searchInput"
            @confirm="searchInput" />
        </view>
        <view v-if="showClearIcon"
          @click="clearIcon">
          <uni-icons type="closeempty"
            size="20"></uni-icons>
        </view>
      </view>
      <view class="searchText">搜索</view>

    </view>

    <view class="list">
      <view class="listContent"
        v-for="(item,index) in listData"
        :key="index">
        <view class="listLeft">{{item.productName}}</view>
        <view class="listRight">￥{{item.price}}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts"
  setup>
  import { ref } from 'vue';

  const userName = ref('')
  const showClearIcon = ref(false)
  const searchInput = () => {
    console.log(userName.value)
    if (userName.value) {
      showClearIcon.value = true
    } else {
      showClearIcon.value = false
    }
  }

  const clearIcon = () => {
    showClearIcon.value = false
    userName.value = ""
  }

  const listData = ref([{
    productName: "商品名称", price: '50'
  }, {
    productName: "牙刷", price: '5'
  }, {
    productName: "牙膏", price: '15'
  }])
</script>

<style lang="scss">
  .recharge {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #F4F6FA;

    .search {
      width: 750rpx;
      height: 98rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      padding: 12rpx 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .searchInput {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx 36rpx;
      width: 615rpx;
      height: 74rpx;
      background: #F4F6FA;
      border-radius: 37rpx 37rpx 37rpx 37rpx;
      border: 1rpx solid #E5E5E5;
      opacity: 0.9;
    }

    .searchText {
      width: 63rpx;
      height: 48rpx;
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: 600;
      font-size: 32rpx;
      color: #595959;
      line-height: 48rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
    }


    .listContent {
      width: 686rpx;
      height: 96rpx;
      background: #FFFFFF;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 32rpx;
      margin: 24rpx 32rpx;
    }

    .listLeft {
      height: 36rpx;
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: normal;
      font-size: 24rpx;
      color: #8C8C8C;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .listRight {
      height: 48rpx;
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: normal;
      font-size: 32rpx;
      color: #FF263F;
      line-height: 48rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
</style>